<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import dayjs from "dayjs";
import { cacheRedisApi, correlationFactorMachineCoolApi } from "@/api/machineFreezeHouseAPI";
import chartHeatMap from "../../freezeBuild/staticData/components/chartHeatMap.vue";
import weatherItem from "../../operation/environmentTestManage/components/weatherItem/index.vue";
import timeItem from "../../operation/environmentTestManage/components/timeItem/index.vue";
import { queryChildByTypeCodeAndItemValue, queryWeatherData } from "@/api/machineClass";

const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]; // 时间选择器默认 xxxx-xx-xx 00:00:00-xxxx-xx-xx 23:59:59
const queryParams = ref<any>({}); // 查询条件
const formRef = ref(); // 筛选条件表单

const chartDataHeatMap = ref({});
const showChartData = ref(false);
// 重置表单
const resetTable = () => {
  formRef.value?.resetFields();
  initDate();
  queryData();
};

const queryData = async () => {
  // 数据字典
  const res: any = await queryChildByTypeCodeAndItemValue({
    // value: `${queryParams.value.machineTask}_DCC`,
    value: `CSP01`,
    typeCode: "MCTS"
  });
  console.log(`output->res`, res);
  nextTick(() => {
    initChart();
  });
};
// 初始化时间筛选条件
const initDate = () => {
  const endTime = dayjs().format("YYYY-MM-DD") + " 23:59:59";
  // const end = new Date(endTime);
  const startTime = dayjs().subtract(3, "month").format("YYYY-MM-DD") + " 00:00:00";
  // const start = new Date(startTime);
  // start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  queryParams.value.date = [startTime, endTime];
};

async function getCacheRedis(uuid: any) {
  const res: any = await cacheRedisApi({ uuid });
  if (res !== null) {
    chartDataHeatMap.value = { ...res, title: { text: "参数相关度分析" } };
    // showChartData.value = true;
  } else {
    setTimeout(() => {
      getCacheRedis(uuid);
    }, 5000);
  }
}
const chartLoading = ref(false);
// 查询热力图
const initChart = async () => {
  try {
    chartLoading.value = true;
    const params = {
      taskType: "",
      midOrLow: `${areaValue.value}_CORR`,
      // midOrLow: `MID_TEMP`,
      startTime: queryParams.value.date[0],
      endTime: queryParams.value.date[1]
    };
    const res1 = await correlationFactorMachineCoolApi(params);
    if (res1) {
      getCacheRedis(res1);
    }
    chartLoading.value = false;
  } catch (error) {
    console.log(error);
    chartLoading.value = false;
  }
};

// 初始化页面数据
const initPageData = async () => {
  initDate();
  await queryData();
};

const weatherData = ref({});

const getWeatherData = async () => {
  const params: any = { diffHours: 0 };
  const data = await queryWeatherData(params);
  weatherData.value = data;
};

onMounted(() => {
  initPageData();
  getWeatherData();
});

const areaValue = ref("CMP");
// area tab
const areas = ref([
  {
    label: "CMP",
    value: "CMP"
  },
  {
    label: "EPI",
    value: "EPI"
  },
  {
    label: "WST",
    value: "WST"
  },
  {
    label: "GCMP",
    value: "GCMP"
  },
  {
    label: "LITHO",
    value: "LITHO"
  },
  {
    label: "ETCH",
    value: "ETCH"
  },
  {
    label: "GPVD",
    value: "GPVD"
  },
  {
    label: "PVD",
    value: "PVD"
  },
  {
    label: "CVD",
    value: "CVD"
  },
  {
    label: "WET",
    value: "WET"
  },
  {
    label: "RTP",
    value: "RTP"
  },
  {
    label: "DIFF",
    value: "DIFF"
  }
  // {
  //   label: "MAU",
  //   value: "MAU"
  // },
  // {
  //   label: "连廊",
  //   value: "连廊"
  // }
]);
const radioChange = () => {
  chartDataHeatMap.value = {};
  queryData();
};
</script>
<template>
  <div class="consumable-items-lifecycle">
    <!-- <div class="top_box borderRidus boxShadow">
      <timeItem />
      <weatherItem :dataList="weatherData" />
    </div> -->
    <div class="correlationFactorAnalysis-page">
      <px-radio-group v-model="areaValue" @change="radioChange">
        <px-radio-button v-for="item in areas" :key="item.value" :label="item.label" :value="item.value" />
      </px-radio-group>
      <px-form
        ref="formRef"
        class="custom-form-ui equip-form"
        :model="queryParams"
        label-position="right"
        label-width="120px"
        style="padding-top: 16px"
      >
        <px-row :gutter="16">
          <!-- <px-col :span="6">
          <px-form-item prop="factorA" label="因子">
              <px-select v-model="queryParams.factorA" multiple filterable collapse-tags collapse-tags-tooltip placeholder="请选择X轴指标">
                <px-option v-for="item in factor" :key="item" :label="item" :value="item" />
              </px-select>
            </px-form-item>
          </px-col> -->
          <px-col :span="8">
            <px-form-item prop="date" label="日期">
              <px-date-picker
                v-model="queryParams.date"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :defaultTime="defaultTime"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryData">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <div class="chart-box">
        <chartHeatMap style="width: 100%" width="100%" height="670px" :chartData="chartDataHeatMap" :chartLoading="chartLoading" />
      </div>
      <!-- <px-table class="custom-table" :data="tableData" style="width: 100%">
        <px-table-column prop="date" label="Time Period" min-width="150">
          <template #default>
            <span>{{ renderTimePeriod() }}</span>
          </template>
        </px-table-column>
        <px-table-column :label="`${cellColumn.factorA}`" align="center">
          <px-table-column width="160px" prop="avg" label="Avg">
            <template #default>
              <span>{{ renderCell(cellData, cellColumn.factorA, "avg") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="max" label="Max">
            <template #default>
              <span>{{ renderCell(cellData, cellColumn.factorA, "max") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="min" label="Min">
            <template #default>
              <span>{{ renderCell(cellData, cellColumn.factorA, "min") }}</span>
            </template>
          </px-table-column>
        </px-table-column>
        <px-table-column :label="`${cellColumn.factorB}`" align="center">
          <px-table-column width="160px" prop="avg" label="Avg">
            <template #default>
              <span>{{ renderCell(cellData, cellColumn.factorB, "avg") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="max" label="Max">
            <template #default>
              <span>{{ renderCell(cellData, cellColumn.factorB, "max") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="min" label="Min">
            <template #default>
              <span>{{ renderCell(cellData, cellColumn.factorB, "min") }}</span>
            </template>
          </px-table-column>
        </px-table-column>
        <px-table-column label="Temp | Humidity" align="center">
          <px-table-column width="160px" prop="avg" label="Avg">
            <template #default>
              <span>{{ renderCell(commonData, ["Temperature", "Humidity"], "avg") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="max" label="Max">
            <template #default>
              <span>{{ renderCell(commonData, ["Temperature", "Humidity"], "max") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="min" label="Min">
            <template #default>
              <span>{{ renderCell(commonData, ["Temperature", "Humidity"], "min") }}</span>
            </template>
          </px-table-column>
        </px-table-column>
        <px-table-column label="DDC Value Opening(%)" align="center">
          <px-table-column width="160px" prop="avg" label="Avg">
            <template #default>
              <span>{{ renderCell(commonData, "DCC_Value_Opening", "avg") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="max" label="Max">
            <template #default>
              <span>{{ renderCell(commonData, "DCC_Value_Opening", "max") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="min" label="Min">
            <template #default>
              <span>{{ renderCell(commonData, "DCC_Value_Opening", "min") }}</span>
            </template>
          </px-table-column>
        </px-table-column>
        <px-table-column label="FFU Speed(RPM)" align="center">
          <px-table-column width="160px" prop="avg" label="Avg">
            <template #default>
              <span>{{ renderCell(commonData, "FFU_Speed", "avg") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="max" label="Max">
            <template #default>
              <span>{{ renderCell(commonData, "FFU_Speed", "max") }}</span>
            </template>
          </px-table-column>
          <px-table-column width="160px" prop="min" label="Min">
            <template #default>
              <span>{{ renderCell(commonData, "FFU_Speed", "min") }}</span>
            </template>
          </px-table-column>
        </px-table-column>
      </px-table> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.borderRidus {
  border-radius: 4px;
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.consumable-items-lifecycle {
  .top_box {
    display: flex;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
  }

  .lifecycle-item {
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 8px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  // .top-info-content {
  // }
  .consumableItems-content {
    padding-bottom: 0;
  }

  .detailInfo-content {
    padding-bottom: 0;
  }
}

.correlationFactorAnalysis-page {
  padding: 16px 24px;
  background: #fff;
  border-radius: 4px;

  .chart-box {
    display: flex;
    width: 100%;
    height: auto;
  }

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }
}
</style>
